<template>
  <div class="related-container">
    <div class="header-box">
      <SectionTitle :title="sectionTitle">
        <el-tooltip v-if="tipText" :open-delay="800" placement="right">
          <div slot="content" style="max-width: 260px; line-height: 1.5">{{ tipText }}</div>
          <tipIcon is-diy style="margin-left: 8px"/>
        </el-tooltip>
      </SectionTitle>
      <template v-if="!showMobilePage">
        <span style="flex:1;"/>
        <PlainCreateBtn v-if="isEdit" style="width: 80px;" size="small" @click="addCollet">添加</PlainCreateBtn>
        <PlainCreateBtn v-if="isEdit" style="width: 100px;margin-left: 12px;" size="small" @click="selectContract">关联合同</PlainCreateBtn>
      </template>
    </div>
    <div v-if="showMobilePage" class="pt10 options-btn-group">
      <PlainCreateBtn v-if="isEdit" style="width: 80px;" size="small" @click="addCollet">添加</PlainCreateBtn>
      <PlainCreateBtn v-if="isEdit" style="width: 100px;margin-left: 12px;" size="small" @click="selectContract">关联合同</PlainCreateBtn>
    </div>
    <dynamicEditTable
      ref="dynamicEditTableRef"
      v-model="value"
      :show-add-btn="false"
      :is-edit="isEdit"
      :list-setting="listSetting"
      :show-copy-btn="false"
      :can-empty="canEmpty"
      :fixed="showMobilePage?false:'right'"
      @changeValue="tableValueChange"
      @selectChange="selectChange"
      @scrollSelectChange="scrollSelectChange"
    />
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import dynamicEditTable from '@/components/Common/dynamicEditTable';
import { mapState } from 'vuex';

export default {
  components: {
    SectionTitle,
    dynamicEditTable
  },
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [{}];
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    listData: {
      type: Array,
      default: () => []
    },
    canEmpty: { // 是否允许为空
      type: Boolean,
      default: false
    },
    tipText: {
      type: String,
      default: ''
    },
    sectionTitle: {
      type: String,
      default: '合同信息'
    },
    listSetting: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    addCollet() {
      this.$refs.dynamicEditTableRef.addValue();
      this.$emit('addRow');
    },
    selectContract() {
      this.$emit('selectContract');
    },
    validate() {
      return this.$refs.dynamicEditTableRef.validate();
    },
    tableValueChange(value) {
      this.$emit('changeValue', value);
    },
    selectChange(data) {
      this.$emit('selectChange', data);
    },
    scrollSelectChange(keyword, data, rowIndex) {
      this.$emit('scrollSelectChange', keyword, data, rowIndex);
    }
  }
};
</script>

<style lang="scss" scoped>
.header-box {
  display:flex;
  align-items:center;
  margin-top: 16px;
}
</style>
